<template>
	<view class="cate">
		<!-- 搜索框 -->
		<my-search @click="toSearch" bgc="pink" radius="15"></my-search>
		<!-- 分类 -->
		<view class="mycate">
			<!-- 一级分类 -->
			<scroll-view scroll-y="true" :style="{height:`${wh}px`}" class="left">
				<view class="left-item" @click="changeIndex(index)" :class="{ active:activeIndex ===index}"
					v-for="(item, index) in cateList" :key="index">{{ item.cat_name }}</view>
			</scroll-view>
			<!-- 二级分类 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{height:`${wh}px`}" class="right">
				<view v-for="(item, index) in twiceList" :key="index">
					<view class="title">
						/<text>{{ item.cat_name }}</text>/
					</view>
					<!-- 三级分类 -->
					<view class="three">
						<view @click="toList(subitem.cat_name)" class="three-item"
							v-for="(subitem,subindex) in item.children" :key="subindex">
							<image :src="subitem.cat_icon"></image>
							<text>{{ subitem.cat_name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import mymixins from '../../mixins/mymixins.js'
	export default {
		mixins: [mymixins],
		data() {
			return {
				// 分类区域的高度
				wh: 0,
				// 设置当前选中的一级分类
				activeIndex: 0,
				// 分类数据源
				cateList: [],
				// 二级分类数据源
				twiceList: [],
				// 滚动的距离
				scrollTop: 0
			};
		},
		onLoad() {
			// 得到容器可使用高度
			uni.getSystemInfo({
				success: res => {
					this.wh = res.windowHeight - 66
				}
			})
			// 获取分类数据
			this.getcateList()
		},
		methods: {
			// 点击搜索框跳转到搜索页
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			// 跳转到商品列表页面
			toList(name) {
				uni.navigateTo({
					url: `/pages/list/list?key=${name}`
				})
			},
			// 改变点击选中的下标
			changeIndex(index) {
				this.activeIndex = index
				// 修改对应的二级分类
				this.twiceList = this.cateList[this.activeIndex].children
				// 重置 scrollTop
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},
			// 获取分类数据源
			async getcateList() {
				const res = await uni.$http.get('/api/public/v1/categories')
				// console.log(res)
				// 判断返回的状态
				if (res.data.meta.status !== 200) return uni.$showMsg()
				// 保存数据
				this.cateList = res.data.message
				// 得到默认的二级分类数据
				this.twiceList = this.cateList[this.activeIndex].children
			}
		}
	}
</script>

<style lang="scss">
	.cate {
		.mycate {
			display: flex;

			.left {
				width: 200rpx;

				.left-item {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					background-color: #f4f4f4;

					&.active {
						color: #eb4450;
						background-color: #ffffff;
						position: relative;

						&::before {
							content: '';
							width: 8rpx;
							height: 60rpx;
							background-color: #eb4450;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.right {
				flex: 1;

				.title {
					line-height: 100rpx;
					color: #e1e1e1;
					text-align: center;

					text {
						margin: 0 40rpx;
						color: #000;
					}
				}

				.three {
					display: flex;
					flex-wrap: wrap;

					.three-item {
						width: 33.33%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						image {
							width: 120rpx;
							height: 120rpx;
						}
					}
				}
			}
		}
	}
</style>
